import React from 'react'
import PropTypes from 'prop-types'
import { Button, Icon, Modal, Table } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import moment from 'moment'
import styles from './List.less'

const confirm = Modal.confirm
const ButtonGroup = Button.Group
const TaskNodeList = ({ onEditItem, clickConfigTaskNode, clickStartTaskNode, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const handleButtonClick = (record, e) => {
    if (record.approveId.length === 0) {
      record.isInit = true
    }
    console.log(record)
    clickConfigTaskNode(record)
  }

  const handleStartClick = (record, e) => {
    clickStartTaskNode(record)
  }

  const columns = [
    {
      title: '审批名称',
      dataIndex: 'approveName',
      key: 'approveName',
    }, {
      title: '审批人ID',
      dataIndex: 'approveId',
      key: 'approveId',
    }, {
      title: '表单地址',
      dataIndex: 'formUrl',
      key: 'formUrl',
    }, {
      title: '是否为启动节点',
      dataIndex: 'isStart',
      key: 'isStart',
      render: (record) => {
        if (record === 1) {
          return <Icon type="check" />
        }
        return <Icon type="close" />
      },
    }, {
      title: '节点定义Key',
      dataIndex: 'taskDefKey',
      key: 'taskDefKey',
    }, {
      title: '节点名称',
      dataIndex: 'taskName',
      key: 'taskName',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '操作',
      key: 'operation',
      width: 60,
      render: (text, record) => {
        if (record.isStart === 0) {
          return (<ButtonGroup>
            <Button size="small" onClick={e => handleButtonClick(record, e)}>配置节点</Button>
            <Button size="small" type="danger" onClick={e => handleStartClick(record, e)}>启动节点</Button>
          </ButtonGroup>
          )
        }
        // return <DropOption onMenuClick={e => handleMenuClick(record, e)}
        // menuOptions={[{ key: '1', name: '查看流程图' }, { key: '2', name: '删除' }]} />
        return (<Button size="small" onClick={e => handleButtonClick(record, e)}>配置节点</Button>)
      },
    },
  ]

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        bordered
        columns={columns}
        simple
        size="small"
        rowKey={record => record.id}
      />
    </div>
  )
}

TaskNodeList.propTypes = {
  onEditItem: PropTypes.func,
  clickConfigTaskNode: PropTypes.func,
  clickStartTaskNode: PropTypes.func,
  location: PropTypes.object,
}

export default TaskNodeList
